<template>
  <page-frame>
    <div class="financial-setup">
      <div class="toptitle">
        <div class="left">财务设置</div>
        <div class="right">
          <div class="btns">
            <el-button @click="submit('ruleForm')" class="lightGreenBtn">保存</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="自动催缴" prop="automaticRemind">
          <el-switch :on-value='1' :off-value='0' v-model="ruleForm.automaticRemind"></el-switch>
        </el-form-item>
        <div v-if="ruleForm.automaticRemind">
          <el-form-item label="提前天数" prop="advanceDay" style="width:50%">
            <el-select v-model="ruleForm.advanceDay" placeholder="">
              <el-option
                v-for="item in dayOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="催缴方式" prop="remindMode">
            <el-checkbox-group v-model="ruleForm.remindMode">
              <el-checkbox :label="0">短信</el-checkbox>
              <el-checkbox :label="1">微信</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <p style="margin-left:120px;">您的账户余额为$_元，下一次收费日期$_，收费$_元</p>
          <el-form-item label="催缴内容" prop="remindContent" style="width:50%">
            <el-input type="textarea" v-model="ruleForm.remindContent"></el-input>
          </el-form-item>
        </div>

        <el-form-item label="允许欠费" prop="allowArrears">
          <el-switch :on-value="1" :off-value="0" v-model="ruleForm.allowArrears"></el-switch>
        </el-form-item>
        <el-form-item v-if="ruleForm.allowArrears" label="允许欠费金额" prop="arrearsAmount" style="width:50%">
          <el-input v-model="ruleForm.arrearsAmount"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </page-frame>
</template>

<script>
  import financialSetupApi from '../../service/finance/financialSetupApi';
  export default {
    data () {
      return {
        ruleForm:{
          automaticRemind:'0',
          advanceDay:null,
          remindMode:[],
          remindContent:'',
          allowArrears:'0',
          arrearsAmount:null
        },
        queryData:{
          automaticRemind:'0',
          advanceDay:null,
          remindMode:'',
          remindContent:'',
          allowArrears:'0',
          arrearsAmount:null
        },
        rules:{
          advanceDay: [
            {type:'number', required: true, message: '请选择提前天数', trigger: 'change' },
          ],
          remindMode: [
            {type:'array', required: true, message: '请选择催缴方式', trigger: 'change' },
          ],
          remindContent: [
            { required: true, message: '请输入催缴内容', trigger: 'blur' },
          ],
          arrearsAmount: [
            { required: true, message: '请输入允许欠费的最大金额', trigger: 'blur' },
          ]
        },
        dayOptions: [{
          value: 5,
          label: '5天'
        }, {
          value: 10,
          label: '10天'
        }, {
          value: 15,
          label: '15天'
        }],
      }
    },
    methods: {
      init() {
        //先加载详情
        this.loadDetailInfo();
      },
      /**
       * 加载详情
       */
      loadDetailInfo(){
        let self = this;
        financialSetupApi.getFinanceConfigInfo().then(
          (response)=>{
            self.ruleForm.automaticRemind = response.data.data.automaticRemind;
            self.ruleForm.allowArrears = response.data.data.allowArrears;
            self.ruleForm.advanceDay = response.data.data.advanceDay;
            if(response.data.data.remindMode.length==1){
              self.ruleForm.remindMode[0] = parseInt(response.data.data.remindMode.substring(0)) ;
            }else{
              self.ruleForm.remindMode[0] = parseInt(response.data.data.remindMode.substring(0,1)) ;
              self.ruleForm.remindMode[1] = parseInt(response.data.data.remindMode.substring(2,3)) ;
            }
            self.ruleForm.remindContent = response.data.data.remindContent;
            self.ruleForm.arrearsAmount = response.data.data.arrearsAmount+'';
          }
        );
      },
      /**
       * 保存(submit)
       */
      submit(formName){
        let self = this;
        self.queryData.automaticRemind = self.ruleForm.automaticRemind;
        self.queryData.advanceDay = self.ruleForm.advanceDay;
        if(self.ruleForm.remindMode.length==1){
          self.queryData.remindMode = self.ruleForm.remindMode[0]+'';
        }else{
          self.queryData.remindMode = self.ruleForm.remindMode[0]+","+self.ruleForm.remindMode[1];
        }
        self.queryData.remindContent = self.ruleForm.remindContent;
        self.queryData.allowArrears = self.ruleForm.allowArrears;
        self.queryData.arrearsAmount = self.ruleForm.arrearsAmount;

        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.$confirm('将保存页面信息, 是否继续?', '确认保存', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              financialSetupApi.addFinanceConfig(self.queryData).then(
              (response)=>{
                self.$message({
                  message: '保存成功',
                  type: 'success'
                });
                self.loadDetailInfo();
              },
              (response)=>{
                self.$message({
                  message: '保存失败',
                  type: 'error'
                });
              }
            );
          }).catch(() => {
            self.$message({
              type: 'info',
              message: '已取消保存'
            });
          });
          } else {
//            console.log('error submit');
            return false;
          }
        });
      },
    },

    mounted: function () {
      this.init();
    },
  }
</script>
<style>

</style>
